Especificaciones gráficas y pantallas

El presente documento deberá ser interpretado como el estándar a nivel gráfico en el momento de construir la aplicación, de modo tal que las interfaces con el usuario sean homogéneas y el diseño y ambientación de la interfaz sean coherentes con los ya adoptados por el cliente (obra social) en cuanto a logos y colores.

Estándares Gráficos

A continuación se enumerarán como debe ser cada item gráfico en la interfaz:

Tipografía

La tipografía seleccionada para toda la aplicación es la Arial simple. De no estar disponible se debe seleccionar una tipografía simple sin serifa y someter a revisión este documento. Este tipo de letra tendrá diferentes características según el contexto donde deba ser empleada. Acto seguido se enumerarán dichos contextos y se le darán los atributos requeridos para cada uno de ellos.

Título principal / Nombre de la empresa: las características serán un tamaño de 14pt, color rojo y engrosados los bordes de la tipografía, sin itálica, sin subrayado.

Encabezados, otros titulares (como ser, el nombre de la instancia de la aplicación o el título de un informe): en este caso la tipografia debe tener un tamaño de 12pt, color negro y estar engrosada en los bordes, sin itálica, sin subrayado.

Barras de estado, datos horarios y demás información adicional: las características serán un tamaño de 8pt, color blanco y sin engrosamiento, sin itálica, sin subrayado.

Acompañamientos de cajas de texto, cajas de selección u otro elemento de entrada de información por parte del usuario: en este contexto la letra debe tener un tamaño de 10pt, color negro, sin engrosamiento en los bordes y sin itálica, sin subrayado.

Mensajes de error: las carácterísticas tipográficas son un tamaño de 8pt, color rojo, con engrosamiento y sin itálica. En este caso, el texto debe ser precedido por un asterisco, sin subrayado.

Título del módulo: es lo que indica la instancia de la aplicación donde se encuentra actualmente. El mismo tendrá tamaño 12pt, color negro y engrosamiento.

Elementos de un listado: en el momento de presentarle un listado al usuario, en cuanto a tipográfia habrá tres elementos visibles. El primero es un titular indicativo del informe cuya tipografía fue descripta anteriormente. Los otros dos corresponden a los encabezados de las columnas y al contenido de las columnas, formando fila a fila el listado. Para los encabezados deberá utilizarse un tamaño de 10pt, color blanco, con engrosamiento y sin itálica, sin subrayado. Para el contenido de las columnas, el estilo que se aplicará será de tamaño 10pt, color azul, sin engrosamiento y sin itálica, sin subrayado.

Información textual: se pueden aplicar en cualquier contexto, donde se deba hacer descripciones o presentar valores al usuario. Su tipografía tendrá un tamaño de 10pt, color negro y sin engrosamiento. La itálica se flexibiliza en este caso para que sea tenida en cuenta por el implementador de la pantalla en particular.

Inputs del usuario: es aplicable a cajas de texto, áreas de texto y combos de selección simple o múltiple. El texto dentro de estas cajas será de tamaño 10pt, color negro, sin engrosamiento y sin itálica. En caso de tipeo de passwords o datos secretos, se aplicará la misma regla, mostrando solamente asteriscos en lugar de lo que va escribiendo el usuario.

Inputs no habilitados: son idénticos a los anteriores, pero el usuario no puede modificar su contenido. Para estos se usarán los mismos parámetros tipográficos que el anterior, con la diferencia de que el color sera un grisado claro.

Eqituetas: son aquellos elementos que acompañan a uno de los inputs que se describieron antes. Las etiquetas tendrán tamaño 10pt, color negro, con engrosamiento y sin itálica. En este punto se admite cierta flexibilidad en cuanto a que si el implementador lo cree correcto, establezca itálica a una etiqueta, cuando se intente resaltar un campo de entre varios.

Botones: Los botones disponibles para cualquier uso, deberán tener un tamaño de 10pt, con engrosamiento y sin itálica, sin subrayado, aunque en este caso y eventualmente pueden tener una letra subrayada si la misma indica un shortcut hacia la acción a ejecutar. En la sección de colores y formatos se describirán las demá características de los botones, como su color. Para terminar, al hacer click sobre ellos deberán cambiar su forma, simulando un efecto en 3D.

Links: Independientemente de si la aplicación es de escritorio o web, llamaremos links  a botones especiales. Estos tendrán las mismas propiedades que un botón común excepto que solamente se despliegará el texto, y la acción será llevada a cabo al hacer click sobre ellos. Los mismos serán de un azul oscuro, el tamaño será de 10pt y tendrán engrosamiento y sin itálica.

Item de Menú: Los ítems de menú, deberán tener un tamaño de 10pt, color negro con engrosamiento y sin itálica, sin subrayado, aunque en este caso y eventualmente pueden tener una letra subrayada si la misma indica un shortcut hacia la acción a ejecutar.

Formato de pantalla

Si bien existirán diversas pantallas en toda la aplicación para los distintos circuitos de la misma, el formato de la interfaz debe ser homogéneo para toda la aplicación. El propósito de esta sección del documento es de definir y especificar esa homogeneidad.

Para toda la especificación suponemos un área de ventana de 800x600 pixels. Cualquier cambio en el tamaño de la pantalla deberá reaplicarse relativo al mismo y reformular esta documentación.

Adicionalmente, se considerará indistinto el ambiente en donde se ejecute. Estas reglas son aplicables tanto a un formato de escritorio como un formato web, y corre con la ventaja de que en posibles accesos vía HTTP se vean uniformes en cuanto a los accesos de escritorio, dando al usuario la sensación de homogeneidad y transparencia.

Formato de pantalla general:

La pantalla a nivel general deberá tener un color de fondo blanco. Un marco negro de 1px de ancho será insertado a 5px de lo bordes. En la esquina superior izquierda se presentará el nombre de la firma (su razón social o nombre fantasía) según las especificaciones tipográficas antes mencionadas. Debajo irán los datos de información de estado, tales como el usuario logueado en el momento, la fecha y la hora y cualquier información que sea útil al usuario para fines ambientales, no sobre la aplicación.

Los datos de información de estado estarán montados sobre una barra rectangular que cubra a las letras (especificadas como blancas anteriormente) por encima y por debajo de ellas con 2 px. El fondo de este rectángulo deberá ser de color rojo, y no presentatará borde alguno.

Debajo del bloque anterior (nombre de la empresa y barra de título) se mostrarán los menús conteniendo los ítems donde puede desplazarse el usuario según su rol. Los mismos serán en formato horizontal. El límite superior de la barra de menús es la barra de estado descripta arriba.
La barra de menú debe comenzar desde el borde izquierdo del marco definido anteriormente. A partir de ahí se listarán cada item de menú. La barra será de color blanco de fondo, y tendra sólo un borde inferior negro que unirá los bordes del marco. Dentro de la barra, cada ítem de menú será separado por una indentación de aproximadamente 20px entre cada ítem. No habrá separadores a nivel gráfico.

En caso de despliegue del menú, se abrirá una caja superponiendo lo que estaba por debajo de ella. El borde izquierdo de dicha caja coincidirá con el comienzo de la primer letra del ítem de menú. Tendrá todos sus bordes en color negro y de tamaño un píxel, color blanco de fondo y su contenido será un subitem de menú por cada fila.

En caso de agrupamientos de funciones, se intercalará entre los ítems que indiquen la separación del agrupamiento, una línea negra de 1px.

Si un subítem requiere además un despliegue de un submenú, el mismo contendrá un triángulo negro, a la altura de la tipografía del ítem y a 1px de borde derecho de la caja. El mismo será un triángulo equilátero cuya base se encuentre en la vertical.

Un submenú despleado de un subítem, abríra otra caja igual a la anterior. El borde superior de la misma deberá coincidir con el tope de la tipografía del subítem que disparó el despliegue. El borde izquierdo estará pegado (a 0px pero no superpuesto) al borde derecho de la caja del menú que la invocó.

Este procedimiento indicado para un submenú deberá aplicarse recursivamente en caso de tener varios niveles de anidación de menú.

El último elemento en comun para las pantallas a nivel general son los mensajes de alerta. Típicamente son frecuentes en los ingresos de datos por parte del usuario, pero la especificación a nivel general permite que en una pantalla de listado, se pueda describir cualquier situación anómala si fuera necesario.

Los mensajes de alerta deben estar situados en posiciones estratégicas. Con esto lo que se intenta expresar, es que debe tener significancia instantánea ante los ojos del usuario, con lo cual se deben ubicar cerca de donde se produjo una anomalía. A modo de ejemplo, un formato erróneo introducido en una caja de texto podría llevar a un error cuando se realice luego una transacción de datos, con lo cual el mensaje de alerta debe ir por debajo de la caja de texto. Las situaciones pueden ser innumerables y queda a criterio del implementador la ubicación exacta de los mensajes de alerta instantáneos, pero deberán cumplimentar la regla de que sean escritos en el lugar donde ocurre el incidente.

En caso de no ser un error puntual, el mensaje debe ser colocado en la parte inferior derecha de la pantalla, a 2px de los bordes inferior y derecho del marco.

El mensaje de alerta debe comenzar con un asterisco, y luego el mensaje de error. En el caso de que el alerta no sea puntual, deberá contener adicionalmente la cadena de caracteres ‘Atención: ‘ seguida por el mensaje correspondiente. Esta cadena debe respetar la misma regla de tipografía qe para el mensaje, pero será subrayada.

Por último, el área por debajo del menú, será en la que el usuario despliegue su actividad. A continuación describiremos tales áreas, dividiéndolas en dos grandes categorías: Formularios y Listados.

Para finalizar, se deberá colocar el título del módulo actual en que se encuentra el usuario. Este debe estar en la esquina superior izquierda del área de trabajo, inmediatamente por debajo de la barra de menú.

Antes de comenzar cada uno, se presentará un gráfico con esta información:

Formulario:

Este tipo de pantalla se refiere a cualquier fase del circuito donde el usuario debe interactuar con la aplicación. La misma generalmente se compone de entradas del tipo caja de texto, caja de selección simple, caja de selección múltiple, combo boxes, y uno o más botones.

Dentro de esta categorización se contemplarán las tres fases básicas de una interacción con el usuario. Las mismas son la carga de datos recién enunciada, una fase de previsualización, donde el usuario puede corroborar que los datos ingresados sean los correctos, y una posterior fase de commit donde se realiza efectivamente la transacción. El objetivo de la previsualización es que ante una transacción el usuario pueda comprobar que los datos que se van a transaccionar sean los que el mismo esperaba, y no hubiera errores de tipeo o una mala selección de una opción, por ejemplo.

Este pretende ser el caso base, luego puede haber una combinación tan compleja como se quiera sobre estas fases, respetando las indicaciones que a continuación se dará a cada una.

Formulario – Fase de carga

En esta etapa es donde se presenta la posibilidad al usuario de que ingrese datos para interactuar con la aplicación. Puede ser el inicio de un módulo, la vuelta atrás de una previsualización o un retorno debido a un intento de carga de un dato inválido.

La primer regla en cuanto a esta fase es que si hay ciertos datos que tienen coherencia entre sí, se deberán agrupar. Para ello, serán recubiertos por un rectángulo negro de 1px de borde y contenido transparente, y en la esquina superior izquierda se mostrará una leyenda a modo de título, que debe expresar el por qué de esa agrupación, simplemente con una frase o título.

Cajas de texto / Areas de texto

Las cajas de texto serán utilizadas para entradas alfanuméricas del usuario. Las áreas de texto se utilizarán para cuando el usuario deba ingresar una cantidad considerable de texto, a modo descriptivo o narrativo.

Para las cajas de texto, se deberán precargar con datos en caso de ser necesario, y se acompañarán a la izquierda por una etiqueta, separada a unos 5px de distancia del input. En caso de las cajas de área, lo mismo es válido, agregando que la etiqueta se deberá colocar alineada con la parte superior del área.

El tamaño de estas cajas no es fijo y debe ser establecido según el parámetro a ingresar. En un agrupamiento vertical, todas las cajas deberán tener el ancho de la más ancha de todas, para conservar uniformidad.

Combos de selección simple y múltiple

Se deberá usar cuando se dispongan una serie de datos ya cargados y el usuario deba seleccionar uno o más de estas opciones. Los datos serán alfanuméricos.

Se respetarán las reglas tipográficas antes enunciadas. No hay restricciones en cuanto a este input. Simplemente tomará el ancho del item más largo.

Con respecto a si el combo es desplegable o no, dependerá de la implementación y el contexto en donde se esté trabajando. No se puede poner un número de ítems tope para hacerlo desplegable, ya que todo depende del resto del contexto, pero como regla flexible se debe tomar que no se vean simultáneamente demasiadas opciones que saturen o pierdan la funcionalidad ante el usuario de la pantalla en general.

La etiqueta debe estar a la izquierda, a unos 5px del combo, alineada con la parte superior del mismo.

Valores booleanos

Para los casos en que los valores a cargar sean booleano, se usarán check boxes o radio buttons.
Para el caso de check boxes, se utilizarán para setear en verdadero o falso los datos requeridos, independientemente uno del otro. No hay restricciones para la posición de estos botones. La etiqueta se colocará a unos 5 px del cuadro para chequear, a la derecha del mismo.

Por el contrario los radio buttons serán utilizados para cuando sólo se puede elegir una de entre varias opciones. En este caso, se enmarcarán en un rectángulo de borde 1px negro y relleno transparente. Dentro del mismo se pondrá un radio por fila, y su etiqueta a unos 5px de distancia, a la derecha del botón. En la esquina superior izquierda del rectángulo que hace de marco, se pondrá una leyenda a modo de título sobre la agrupación de los botones.

Inforamación adicional

Es la información textual que no interactúa con el usuario si no que puede ayudarlo como guía o brindarle algún tipo de información. Se deben seguir las reglas tipográficas para este elemento, y su ubicación es flexible, a criterio del implementador de la pantalla.

Botones

Los botones tendrán una apariencia similar a la caja de texto, pero su información no podrá ser modificada. Deberán presentar un borde tal que provoque el efecto de ser un botón en 3D. El color de fondo sera el azul (la letra ya se dijo que será blanca). Todos presentarán el mismo tamaño, que será el del botón de mayor ancho de toda la pantalla. El ancho mínimo del botón es el que ocupa el texto dentro del mismo. El más grande de estos será utlizado como parámetro para el conserva el mismo tamaño en los demás.

Los textos no deben cortarse, todos deben estar en una sóla línea, y no deberían ser más de una palabra representativa de la acción que sucederá, tal como ‘guardar’ o ‘cancelar’. Todas las letras deben estar en minúscula, acentuadas y con ‘ñ’ cuando sea necesario (el cliente deberá tener configurado su sistema operativo para ser compatible con caracteres regionales).

Esquema:

A continuación se presenta un ejemplo de una posible etapa de carga. Solamente se presenta el bosquejo del área de trabajo, conforme a como se fue estableciendo en las secciones previas:

Formulario – Fase de previsualización

En esta etapa, se muestran los datos que el usuario ha cargado previamente. No hay mucho para decir acerca de esta etapa. Cada instancia tendrá sus propios diseños aunque propondremos un patrón minimo para mantener una homogeneidad.

Los datos se van a mostrar de la siguiente manera: “nombre_dato: valor” en donde el nombre del dato es exactamente eso, y el valor es el introducido por el usuario. El nombre del dato irá con los mismos atributos tipográficos que una etiqueta, y el valor será de la misma manera, pero se sacará el engrosamiento de la tipografía.
Los pares nombre-valor serán ubicados uno debajo del otro, en columnas, y centralizado con respecto a los margenes laterales de la pantalla.

En caso de haber agrupaciones lógicas de datos, los mismos se ubicarán aparte, enmarcados en un rectángulo de borde negro de 1px y relleno transparente, y el mismo tendrá en su esquina superior izquierda una leyenda que destaque la agrupación.

Luego habrá un botón para modificar los datos, y otro para hacer el commit. Estos estarán alineados horizontalmente y en la esquina inferior derecha de la pantalla.

Un esquema de lo anterior es el siguiente:

Formulario – Fase de commit

En esta fase, se ejecuta la acción solicitado por el usuario y se produce una transacción. La misma puede ser el agregar datos en la base, modificarlos, eliminarlos, realizar búsquedas, etcétera.

En esta etapa, solamente se informa el resultado de la acción del usuario. En el caso de búsquedas, se presentarán datos que el usuario deseaba localizar.

Para el caso de las altas, bajas y modificaciones de datos, la pantalla simplemente mostrará un mensaje acerca de la operación que se ha realizado y su resultado. Si la misma no fue exitosa, se mostrará un mensaje al usuario solicitando que se comunique con el área de administración, ya que ningún error relacionado a la implementación o al mal funcionamiento del motor de base de datos deberá ser presentado al usuario final.

Dependiendo de la criticidad de la información y la transacción realizada, se hará un detalle sobre los datos que han participado en la misma. Eso depende fuertemente del módulo en ejecución y la tarea a realizar. Por ejemplo, al dar de alta un afiliado, se mostrarán todos los datos ingresados en la base de datos, aunque sea redundante al haberlo hecho en la fase de previsualización, pero el usuario debe estar al tanto de lo que acaba de introducir.

En los casos en donde se repite la información de datos, se tomarán las mismas reglas que en la fase de previsualización.

Esta pantalla puede o no tener otones dependiendo del módulo donde se esté trabajando. A modo de ejemplo, en un alta, baja mo modificación no es necesario ningún botón ya que el minicircuito realizado finaliza allí. Una acción de búsqueda puede en realidad estar siendo necesitada para disparar otro evento, el cual podría ser llamado por un botón dentro de los resultados.

La siguiente es una pantalla esquematizada de un resultado de una transacción exitosa, con listado de los valores cargados y con finalización de la misma del minicircuito de un ABM:

Listados:

Los listados pueden provenir de una búsqueda, o ser llamados directamente desde algún ítem de menú. Lo que hacen es obtener diversos valores de la base de datos y presentárselos al usuario.

En este esquema la pantalla es simple. Se muestra una primer fila que hace de encabezado, y a continuación las siguientes filas que son los valores obtenidos. Eventualmente se puede poner un mensaje de información textual, como por ejemplo cuando no se han obtenido resultados, o con información útil al usuario. Este mensaje estará siempre antes del comienzo de la tabla.

Los encabezados deberán estar embebidos en pequeñas celdas. Las mismas tendrán un fondo azul y la tipografía coincide con el encabezado definido antes.

Las filas con contenido deberán estar indentadas hacia la derecha en todos los casos. La tipografía coincide con la que se definició al comienzo.

Paginación:

Cuando las listas ocupen demasiadas líneas, es conveniente realizar una paginación para que el usuario pueda visualizarlas más fácilmente e incluso imprimir los listados a gusto de ser necesario.

Debajo de la última fila, habrá 4 textos del tipo link (independiente si es web o de escritorio). Los mismos son, en este mismo orden: “primero – anterior – siguiente – último”.

Primero: se dirige a la primer página. Sólo aparece cuando se está en la página dos o superior.
Anterior: se dirige a la página anterior. Sólo aparece cuando está en la página dos o superior.
Siguiente: se dirige a la siguiente página. Sólo aparece si no está en la última página.
Ultimo: se dirige a la última página. Sólo aparece si no está en la última página.

Estos links deben situarse en la parte inferior derecha de la pantalla.

En cuanto al número de filas, inicialmente tendrá un tope de 10 filas. En la parte inferior izquierda de la pantalla deberá aparecer un combo desplegable de selección simple con los campos ‘10’ – ‘20’ – ’50’ – ‘100’. Alineado a su izquierda habrá una etiquieta con la leyenda ‘Cantidad de registros por página: ’. De esta manera, el usuario podrá elegir de a cuantas filas realizar la paginación.

El siguiente es un esquema de cómo se debe armar una pantalla de listado de información: